<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="renderer" content="webkit">
		<link rel="stylesheet" type="text/css" href="../public/bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="../public/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="../public/css/pick-pcc.min.1.0.1.css" />
		<link rel="stylesheet" href="../public/css/jquery_style.css" />
		<link rel="stylesheet" href="../public/css/style.css" />
		<script type="text/javascript" src="../public/js/jquery-3.2.1.js"></script>
		<script type="text/javascript" src="../public/js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript" src="../public/js/jquery.min.js"></script>
		<script type="text/javascript" src="../public/js/pick-pcc.min.1.0.1.js"></script>
		<title>Jquery实现的省市区分级样式 </title>
	</head>

	<body>
		<div class="container">
			<h3>Jquery省市区三级级联</h3>
			<div class="row main_container">
				<!--定义省市区三级级联-->
				<div class="col-xs-6 col-md-4 col-center-block">
					<div class="a">
						<h3>1.显示省市</h3>
						<a href="javascript:void(0)" class="pick-area pick-area2" name=""></a>
						<input type="text" placeholder="">
					</div>

					<div class="a">
						<h3>2.显示省</h3>
						<a href="javascript:void(0)" class="pick-area pick-area3" name=""></a>
						<input type="text" placeholder="">
					</div>

					<div class="a">
						<h3>3.显示省市区</h3>
						<a href="javascript:void(0)" class="pick-area pick-area4" name="新疆维吾尔自治区/博尔塔拉蒙古自治州"></a>
						<input type="text" placeholder="">
					</div>
				</div>
			</div>
		</div>

	</body>

	<script type="text/javascript">
		$(".pick-area2").pickArea({
			"format": "北京市/市辖区", //格式
			"width": "300",
			"borderColor": "#7b68ee", //文本边框的色值
			"arrowColor": "#7b68ee", //箭头颜色
			"listBdColor": "#7b68ee", //下拉框父元素ul的border色值
			"color": "#7b68ee", //字体颜色
			"fontSize": "16px", //字体大小
			"hoverColor": "#7b68ee",
			"paddingLeft": "10px",
			"arrowRight": "10px",
			//"preSet":"北京市/市辖区/东城区",
			"getVal": function() {
				//console.log($(".pick-area-hidden").val())
				//console.log($(".pick-area-dom").val())
				var thisdom = $("." + $(".pick-area-dom").val());
				thisdom.next().val($(".pick-area-hidden").val());
			}
		});

		$(".pick-area3").pickArea({
			"format": "江苏省", //格式
			"width": "400",
			"borderColor": "#51AFC9", //文本边框的色值
			"arrowColor": "#51AFC9", //箭头颜色
			"listBdColor": "#51AFC9", //下拉框父元素ul的border色值
			"color": "#51AFC9", //字体颜色
			"fontSize": "16px", //字体大小
			"hoverColor": "#51AFC9",
			"paddingLeft": "10px",
			"arrowRight": "10px",
			"maxHeight": "600",
			//"preSet":"河南省/郑州市",
			"getVal": function() {
				//console.log($(".pick-area-hidden").val())
				//console.log($(".pick-area-dom").val())
				var thisdom = $("." + $(".pick-area-dom").val());
				thisdom.next().val($(".pick-area-hidden").val());
			}
		});
		$(".pick-area4").pickArea({
			"format": "province/city/county", //格式
			"width": "420", //设置“省市县”文本边框的宽度
			"height": "48", //设置“省市县”文本边框的高度
			"borderColor": "#435abd", //设置“省市县”文本边框的色值
			"arrowColor": "#435abd", //设置下拉箭头颜色
			"listBdColor": "#435abd", //设置下拉框父元素ul的border色值
			"color": "#435abd", //设置“省市县”字体颜色
			"fontSize": "20px", //设置字体大小
			"hoverColor": "#435abd",
			"paddingLeft": "30px", //设置“省”位置处的span相较于边框的距离
			"arrowRight": "30px", //设置下拉箭头距离边框右侧的距离
			"maxHeight": "300px",
			//"preSet":"",//数据初始化 ；这里的数据初始化有两种方式，第一种是用preSet属性设置，第二种是在a标签里使用name属性设置
			"getVal": function() { //这个方法是每次选中一个省、市或者县之后，执行的方法
				//console.log($(".pick-area-hidden").val())
				//console.log($(".pick-area-dom").val())
				var thisdom = $("." + $(".pick-area-dom").val()); //返回的是调用这个插件的元素pick-area，$(".pick-area-dom").val()的值是该元素的另一个class名，这个class名在dom结构中是唯一的，不会有重复，可以通过这个class名来识别这个pick-area
				thisdom.next().val($(".pick-area-hidden").val()); //$(".pick-area-hidden").val()是页面中隐藏域的值，存放着每次选中一个省、市或者县的时候，当前文本存放的省市县的最新值，每点击一次下拉框里的li，这个值就会立即更新
			}
		});
	</script>
</html>